
<template>
  <div class="vc-collect-list-control" :style="positionStyle">
    <div class="vc-button" @click="onClickItem">
      <img src="@/assets/svg/collection.svg" style="color: bisque" />
      <span>坐标</span>
    </div>
  </div>

  <control-drawer ref="drawerRef" title="标记" class="control-drawer">
   <el-tabs v-model="activeName" :stretch="true">
    <el-tab-pane label="我的标记" name="my" lazy>
        <vc-collect-list />
    </el-tab-pane>
    <el-tab-pane label="公共标记" name="public" lazy>
        <vc-collect-list />
    </el-tab-pane>
  </el-tabs>
  </control-drawer>
</template>


<script setup lang="ts">
import { ref } from "vue";
import { positionProps, usePosition } from "../composables/usePosition";

import ControlDrawer from "../control-drawer.vue";
import VcCollectList from './vc-collect-list.vue'
// import VcCollectionPublicList from './vc-collect-public-list.vue'
const drawerRef = ref();
const activeName = ref('my')
const props = defineProps({
  ...positionProps,
});
const { positionStyle } = usePosition(props);

const onClickItem = () => {
  drawerRef.value.open();
};
</script>

<style scoped lang="scss">
.vc-collect-list-control {
  position: absolute;
  z-index: 101;
  .vc-button {
    img {
      width: 14px;
      height: 14px;
    }
  }
}
.control-drawer {
  :deep(.el-tabs__nav){
    .el-tabs__nav-wrap::after{
      position: static !important;
    }
    .el-tabs__item{
      font-size: var(--font-size-xs);
      height: 30px;
    }
  }
  :deep(.el-tabs__header){
    margin: 0 0 10px;
  }
  :deep(.el-drawer__body){
    padding: 0px 10px !important;
  }
}
</style>
